<template>
  <!-- Dock触发区域 -->
  <div class="dock-trigger"></div>
  
  <!-- macOS 风格 Dock 菜单 -->
  <div class="dock" :class="{ show: showDock }">
    <router-link
      v-for="item in dockItems" 
      :key="item.path"
      :to="item.path"
      class="dock-item"
      :class="{ active: isActive(item.path) }"
      :data-tooltip="item.name"
      @click="handleDockClick(item)"
    >
      {{ item.icon }}
    </router-link>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'

// 路由实例
const route = useRoute()

// 响应式数据
const showDock = ref<boolean>(false)
let dockTimer: NodeJS.Timeout | null = null

// Dock菜单项配置
interface DockItem {
  name: string
  path: string
  icon: string
}

const dockItems: DockItem[] = [
  { name: '工作台', path: '/manager/dashboard', icon: '🏠' },
  { name: '订单管理', path: '/manager/orders', icon: '📋' },
  { name: '打手管理', path: '/manager/workers', icon: '👥' },
  { name: '客户管理', path: '/manager/customers', icon: '👤' },
  { name: '服务管理', path: '/manager/services', icon: '⚙️' },
  { name: '财务管理', path: '/manager/finance', icon: '💰' },
  { name: '店铺设置', path: '/manager/settings', icon: '🔧' },
  { name: '系统日志', path: '/manager/logs', icon: '📊' }
]

// 判断路由是否激活
const isActive = (path: string): boolean => {
  return route.path === path || route.path.startsWith(path)
}

// 处理Dock点击事件
const handleDockClick = (item: DockItem) => {
  console.log(`导航到: ${item.name} (${item.path})`)
}

// 鼠标移动监听
const handleMouseMove = (e: MouseEvent) => {
  const windowHeight = window.innerHeight
  const mouseY = e.clientY
  
  // 当鼠标在底部100px范围内时显示Dock
  if (mouseY > windowHeight - 100) {
    showDock.value = true
    
    // 清除隐藏计时器
    if (dockTimer) {
      clearTimeout(dockTimer)
      dockTimer = null
    }
  } else {
    // 当鼠标离开底部区域时，延迟隐藏
    if (dockTimer) {
      clearTimeout(dockTimer)
    }
    dockTimer = setTimeout(() => {
      showDock.value = false
    }, 500) // 0.5秒延迟
  }
}

// Dock鼠标进入事件
const handleDockMouseEnter = () => {
  if (dockTimer) {
    clearTimeout(dockTimer)
    dockTimer = null
  }
  showDock.value = true
}

// Dock鼠标离开事件
const handleDockMouseLeave = () => {
  if (dockTimer) {
    clearTimeout(dockTimer)
  }
  dockTimer = setTimeout(() => {
    showDock.value = false
  }, 800) // 0.8秒延迟
}

// 组件挂载
onMounted(() => {
  document.addEventListener('mousemove', handleMouseMove)
  
  const dockElement = document.querySelector('.dock')
  if (dockElement) {
    dockElement.addEventListener('mouseenter', handleDockMouseEnter)
    dockElement.addEventListener('mouseleave', handleDockMouseLeave)
  }
})

// 组件卸载
onUnmounted(() => {
  document.removeEventListener('mousemove', handleMouseMove)
  
  const dockElement = document.querySelector('.dock')
  if (dockElement) {
    dockElement.removeEventListener('mouseenter', handleDockMouseEnter)
    dockElement.removeEventListener('mouseleave', handleDockMouseLeave)
  }
  
  if (dockTimer) {
    clearTimeout(dockTimer)
  }
})

console.log('DockNavigation组件已加载')
</script>

<style scoped lang="scss">
// Dock触发区域
.dock-trigger {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  z-index: 999;
  pointer-events: none;
  background: transparent;
}

// macOS Dock 样式
.dock {
  position: fixed;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 30px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.4),
    0 0 80px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  z-index: 1000;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  &.show {
    bottom: 20px;
  }
}

// Dock菜单项
.dock-item {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #f5576c);
  background-size: 400% 400%;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  font-size: 22px;
  color: white;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  animation: dockGradient 6s ease infinite;

  &:hover {
    transform: translateY(-12px) scale(1.3);
    box-shadow: 
      0 20px 60px rgba(102, 126, 234, 0.6),
      0 0 40px rgba(255, 255, 255, 0.3);
    animation-play-state: paused;
  }

  &.active {
    background: linear-gradient(135deg, #ff6b6b, #feca57);
    transform: translateY(-8px) scale(1.2);
    box-shadow: 
      0 12px 40px rgba(255, 107, 107, 0.6),
      0 0 30px rgba(254, 202, 87, 0.4);
  }

  // 工具提示
  &::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1001;
  }

  &:hover::after {
    opacity: 1;
    visibility: visible;
  }
}

// Dock渐变动画
@keyframes dockGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
</style>